import { Spin as AntdSpin } from 'antd'
import { CommonComponentProps } from '../../interface'
import { useDrag } from 'react-dnd'
import { useEffect, useRef } from 'react'

const Spin = ({ id, styles }: CommonComponentProps) => {

  const divRef = useRef<HTMLDivElement>(null)

  const [_, drag] = useDrag({
    type: 'Spin',
    item: {
      type: 'Spin',
      dragType: 'move',
      id: id,
    }
  })

  useEffect(() => {
    drag(divRef)
  })

  return <div data-component-id={id} style={styles} ref={divRef} className='flex items-center justify-center'>
    <AntdSpin></AntdSpin>
  </div>
}

export default Spin